<template>
    <view>
        <u-row gutter="16">
            <u-col span="3">
                <u-image src="/static/images/logo.gif" width="150rpx" height="100rpx" @click="toHome"></u-image>
            </u-col>
            <u-col span="3">
            </u-col>
            <u-col span="6">
                <view v-if="!user">
                    <view class="login" @click="loginOpen">
                        <!--                        <u-button @click="loginOpen" shape="circle" class="login">-->
                        <!--                            登录/注册-->
                        <!--                        </u-button>-->
                        <u-icon name="account-fill" :size="40" class="icon"></u-icon>
                        <view class="login-text">Login/Register</view>
                        <!--                        <u-button @click="registerOpen" shape="circle" size="medium" class="register" type="warning">-->
                        <!--                            注册-->
                        <!--                        </u-button>-->
                    </view>
                    <!--          登录弹窗          -->
                    <u-popup ref="login" mode="center" border-radius="25" closeable :width="windowsWidth+'px'">
                        <Login @login-success="loginClose" @toRegister="toRegister"/>
                    </u-popup>
                    <!--          注册弹窗          -->
                    <u-popup ref="register" mode="center" border-radius="25" closeable :width="windowsWidth+'px'">
                        <Register @toLogin="toLogin"/>
                    </u-popup>
                </view>
                <view v-else>
                    <view class="user">
                        <view class="user-exchange">
                            <view @click="toExchange">
                                <i class="custom-icon custom-icon-jixuduihuan"
                                   style="color: #ffffff"></i>
                            </view>
                        </view>
                        <view class="user-item">
                            <view class="coin">
                                <i class="custom-icon custom-icon-objects-color_diamond"
                                   style="color: #65a5c7;padding-right: 5rpx"></i>
                                <span>{{ user.coin }}</span>
                            </view>
                            <view class="shop_score">
                                <u-icon name="rmb-circle-fill" color="#2979ff" size="28"
                                        style="padding-right: 5rpx"></u-icon>
                                <span>{{ user.shop_score }}</span>
                            </view>
                        </view>
                        <!--                        <u-avatar :src="user.avatar" size="default" shape="circle"></u-avatar>-->
                        <view class="user-avatar">
                            <u-avatar :src="user.avatar" size="mini" shape="circle" @click="toUser"></u-avatar>
                        </view>
                    </view>
                </view>
            </u-col>
        </u-row>
        <view>
            <u-popup ref="exchange" mode="center" border-radius="25" closeable :width="windowsWidth+'px'"
                     v-model="exchangeShow">
                <view
                    style="display: flex;flex-direction: column;align-items: center;background-color: #0f0e2d">
                    <h2 style="padding: 40rpx">Exchange diamonds</h2>
                    <u-input placeholder="Please enter the quantity of mall coins" class="input"
                             v-model="amount" focus
                             type="number" border/>
                    <view style="display: flex;margin-top: 20rpx;margin-bottom: 15rpx">
                        <u-button type="info" @click="exchangeShow = false" shape="circle" size="medium">Cancel
                        </u-button>
                        <u-button style="margin-left: 50rpx" type="success" @click="confirm" shape="circle"
                                  size="medium">Confirm
                        </u-button>
                    </view>
                </view>
            </u-popup>
        </view>
        <u-toast ref="uToast"/>
    </view>
</template>
<script>
import Login from "@/components/login/login.vue";
import Register from "@/components/register/register.vue";
import {EventBus} from '@/eventBus.js';

export default {
    components: {
        Login,
        Register
    },
    data() {
        return {
            windowsWidth: 0,
            exchangeShow: false,
            amount: '',
        }
    },
    computed: {
        user() {
            return this.$store.getters.getUser ? this.$store.getters.getUser : null;
        }
    },
    mounted() {
        this.windowsWidth = this.$store.getters.getWindowsWidth;
        EventBus.$on('call-loginOpen', this.loginOpen);
    },
    beforeDestroy() {
        EventBus.$off('call-loginOpen', this.loginOpen);
    },
    methods: {
        // 首页
        toHome() {
            this.$u.route({
                type: 'redirectTo',
                url: '/pages/index/index'
            })
        },
        // 打开登录popup
        loginOpen() {
            this.$refs.login.open()
        },
        // 关闭登录popup
        loginClose() {
            this.$refs.login.close(); // 关闭popup
        },
        // 关闭登录popup 打开注册popup
        toRegister() {
            this.$refs.login.close();
            this.$refs.register.open();
        },
        // 打开注册popup
        // registerOpen() {
        //     this.$refs.register.open()
        // },
        // 关闭注册popup 打开登录popup
        toLogin() {
            this.$refs.register.close();
            this.$refs.login.open();
        },
        // 兑换
        toExchange() {
            this.amount = '';
            this.exchangeShow = true;
        },
        confirm() {
            if (!this.amount) {
                this.$u.toast('Please enter the number of diamonds you want to redeem');
                return;
            }
            this.$u.api.scoreToCoin({
                amount: this.amount
            }).then(res => {
                if (res.code === 1) {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'success'
                    })
                    this.$u.api.getUserInfo().then(response => {
                        if (response.code === 1) {
                            const user = response.data;
                            // 提交mutation来更新Vuex中的状态
                            this.$store.commit('user/SET_USER', user);
                            // 保存到本地存储
                            uni.setStorageSync('user', user);
                        }
                    })
                    this.exchangeShow = false;
                } else {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'error'
                    })
                }
            })
        },
        // 用户
        toUser() {
            this.$u.route({
                type: 'redirectTo',
                url: '/pages/my/my'
            })
        }
    }
}

</script>

<style scoped lang="scss">
.login {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 20rpx;

    .icon {
        margin-right: 20rpx;
        padding: 5rpx;
        color: #0f0e2d;
        background-color: #ffdda6;
        border: 1px solid #ffffff;
        border-radius: 50%;
    }

    .login-text {
        color: #b9bdcf;
    }
}

.user {
    display: flex; /* 启用Flexbox布局 */
    justify-content: flex-end; /* 靠右对齐 */
    align-items: center; /* 上下居中 */

    .user-exchange {
        margin-right: 20rpx;
    }

    .user-item {
        display: flex;
        flex-direction: column;
        .coin{
            //background-color: #0086b3;
            //border-radius: 25rpx;
            //padding: 5rpx;
        }
    }

    .user-avatar {
        margin-left: 20rpx;
    }

}

.input {
    width: 80%;
    margin-bottom: 30rpx;

    ::v-deep .uni-input-input {
        color: #ffffff;
    }
}

::v-deep .u-type-success {
    background-color: #0f0e2d;
    border: none;
}

::v-deep .u-type-error {
    background-color: #0f0e2d;
    border: none;
}
</style>